<template>
	<div class="forgot-password-container">
		<headerNav :show-btn="true" />

		<div class="forgot-password-content">
			<h2 class="title">忘记密码</h2>
			<el-form :model="form" ref="ruleFormRef" :rules="rules" label-width="auto">
				<el-form-item label="找回方式" prop="recoveryMethod">
					<el-radio-group v-model="form.recoveryMethod" text-color="#fff" fill="#409eff">
						<el-radio-button label="phone">手机号</el-radio-button>
						<el-radio-button label="email">邮箱</el-radio-button>
					</el-radio-group>
				</el-form-item>

				<el-form-item label="手机号" prop="phone" v-if="form.recoveryMethod == 'phone'">
					<el-input v-model="form.phone" placeholder="请输入手机号">
						<template #prepend>
							<el-select v-model="form.areaCode">
								<el-option label="+86" value="86" />
							</el-select>
						</template>
					</el-input>
				</el-form-item>

				<el-form-item label="邮箱" prop="email" v-else>
					<el-input v-model="form.email" placeholder="请输入邮箱地址" />
				</el-form-item>

				<el-form-item label="验证码" prop="verificationCode">
					<el-input v-model="form.verificationCode" placeholder="请输入验证码">
						<template #append>
							<el-button type="warning" class="get-code-btn" :disabled="countdown > 0" @click="getVerificationCode">
								{{ countdown > 0 ? `${countdown}s后重新获取` : '获取验证码' }}
							</el-button>
						</template>
					</el-input>
				</el-form-item>

				<el-form-item label="重置密码" prop="password">
					<el-input v-model="form.password" type="password" placeholder="6-20位字母数字组合" show-password />
				</el-form-item>

				<el-form-item label="确认密码" prop="confirmPassword">
					<el-input v-model="form.confirmPassword" type="password" placeholder="请再次输入密码" show-password />
				</el-form-item>

				<el-form-item class="submit-btn">
					<el-button type="danger" @click="submitForm">确认</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script setup lang="ts">
import './style.scss';
import { ref, reactive, defineAsyncComponent } from 'vue';
import type { FormInstance, FormRules } from 'element-plus';
import { ElMessage } from 'element-plus';

const headerNav = defineAsyncComponent(() => import('../../components/headerNav/index.vue'));

interface FormData {
	recoveryMethod: string;
	areaCode: string;
	phone: string;
	email: string;
	verificationCode: string;
	password: string;
	confirmPassword: string;
}

const ruleFormRef = ref<FormInstance>();
const countdown = ref(0);

const form = reactive<FormData>({
	recoveryMethod: 'phone',
	areaCode: '86',
	phone: '',
	email: '',
	verificationCode: '',
	password: '',
	confirmPassword: '',
});

const validatePassword = (rule: any, value: string, callback: any) => {
	if (!value) {
		callback(new Error('请输入密码'));
	} else if (!/^[A-Za-z0-9]{6,20}$/.test(value)) {
		callback(new Error('密码必须是6-20位的数字、字母'));
	} else {
		callback();
	}
};

const validateConfirmPassword = (rule: any, value: string, callback: any) => {
	if (!value) {
		callback(new Error('请再次输入密码'));
	} else if (value !== form.password) {
		callback(new Error('两次输入的密码不一致'));
	} else {
		callback();
	}
};

const rules = reactive<FormRules<FormData>>({
	recoveryMethod: [{ required: true, message: '请选择找回方式', trigger: 'change' }],
	phone: [
		{ required: true, message: '请输入手机号', trigger: 'blur' },
		{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' },
	],
	email: [
		{ required: true, message: '请输入邮箱', trigger: 'blur' },
		{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' },
	],
	verificationCode: [
		{ required: true, message: '请输入验证码', trigger: 'blur' },
		{ len: 6, message: '验证码为6位数字', trigger: 'blur' },
	],
	password: [{ validator: validatePassword, trigger: 'blur' }],
	confirmPassword: [{ validator: validateConfirmPassword, trigger: 'blur' }],
});

const getVerificationCode = () => {
	if (form.recoveryMethod === 'phone' && !form.phone) {
		ElMessage.warning('请输入手机号');
		return;
	}
	if (form.recoveryMethod === 'email' && !form.email) {
		ElMessage.warning('请输入邮箱');
		return;
	}

	// 模拟发送验证码
	countdown.value = 60;
	const timer = setInterval(() => {
		countdown.value--;
		if (countdown.value <= 0) {
			clearInterval(timer);
		}
	}, 1000);

	ElMessage.success(`验证码已发送至您的${form.recoveryMethod === 'phone' ? '手机' : '邮箱'}`);
};

const submitForm = async (formEl: FormInstance | undefined) => {
	if (!formEl) return;

	await formEl.validate((valid) => {
		if (valid) {
			ElMessage.success('密码重置成功');
			// 这里添加实际提交逻辑
		}
	});
};
</script>

<style scoped>
.forgot-password-container {
	height: 100vh;
	display: flex;
	flex-direction: column;
}

.forgot-password-content {
	display: flex;
	margin-top: 6rem;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	background-color: #f5f7fa;
}

.title {
	margin-bottom: 1rem;
}

:deep(.el-form) {
	width: 35%;
	padding: 3rem;
	border-radius: 8px;
	background-color: #fff;
	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

:deep(.el-radio-group) {
	width: 100%;
	display: flex;
}

:deep(.el-radio-button) {
	flex: 1;
}

:deep(.el-radio-button__inner:hover) {
  color: #409eff !important;
}

:deep(.el-radio-button__inner) {
	width: 100%;
}

:deep(.el-form-item__label) {
	font-weight: bold;
	color: #606266;
	padding-bottom: 8px;
}

:deep(.el-form-item__content) {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

:deep(.el-select__wrapper) {
	width: 6.6rem;
}

.el-radio-group {
	width: 100%;
}

.recovery-method :deep(.el-radio-group) {
	width: 100%;
}

.recovery-method :deep(.el-radio-button) {
	flex: 1;
}

.recovery-method :deep(.el-radio-button__inner) {
	width: 100%;
}

.verification-code-input {
	display: flex;
	gap: 10px;
}

.get-code-btn {
	white-space: nowrap;
}

.submit-btn :deep(.el-button) {
	width: 50%;
	margin-top: 10px;
}

:deep(.el-input-group__prepend) {
	padding: 0;
}

:deep(.el-select) {
	.el-input__inner {
		padding-left: 10px;
		padding-right: 10px;
	}
}

:deep(.el-input) {
	.el-input__wrapper {
		box-shadow: 0 0 0 1px var(--el-input-border-color, #dcdfe6);
	}

	&.is-focus .el-input__wrapper {
		box-shadow: 0 0 0 1px red !important;
	}
}
</style>
